'use strict' // 严格模式声明
const path = require('path') // 引入node.js的path模块，用于处理文件路径
const defaultSettings = require('./src/settings.js') // 引入项目设置文件
const TerserPlugin = require('terser-webpack-plugin')

// 定义resolve函数，用于快速获取绝对路径
function resolve(dir) {
  return path.join(__dirname, dir) // 拼接当前目录与传入目录
}

const name = defaultSettings.title || '璟创文化人力资源后台管理系统' // 获取页面标题，如果设置文件中没有则使用默认值

// 如果你的端口设置为80，
// 使用管理员权限执行命令行。
// 例如，Mac: sudo npm run
// 您可以通过以下方法更改端口：
// port = 9528 npm run dev 或 npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // 开发服务器端口设置

// 所有配置项说明都可以在 https://cli.vuejs.org/config/ 找到
module.exports = {
  /**
   * 如果您计划在子路径下部署您的网站，
   * 例如GitHub Pages。如果您计划将您的网站部署到 https://foo.github.io/bar/，
   * 那么 publicPath 应该设置为 "/bar/"。
   * 在大多数情况下请使用 '/' !!!
   * 详情: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/', // 应用的基本路径
  outputDir: 'dist', // 构建文件的输出目录
  assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  lintOnSave: process.env.NODE_ENV === 'development', // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  productionSourceMap: false, // 生产环境是否生成 source map 文件
  devServer: {
    port: port, // 开发服务器端口号
    open: true, // 启动后是否自动打开浏览器
    overlay: {
      warnings: false, // 是否显示警告信息
      errors: true // 是否显示错误信息
    },
    proxy: {
      '/api': {
        target: 'https://heimahr.itheima.net/' // 接口代理地址
      }
    }
    // before: require('./mock/mock-server.js') // 基础模板做的模拟数据，拦截请求
  },
  configureWebpack: {
    // 在webpack的name字段中提供应用的标题，以便在index.html中访问以注入正确的标题。
    name: name, // webpack配置中的项目名称
    resolve: {
      alias: {
        '@': resolve('src') // 设置路径别名，@指向src目录
      }
    },
    // 配置需要排出的包
    // externals: {
    //   'vue': 'Vue',
    //   'element-ui': 'ELEMENT',
    //   'cos-js-sdk-v5': 'COS'
    // }
    // 打包时去除console.log
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true, // 删除所有console.*
              drop_debugger: true // 删除所有debugger
            }
          }
        })
      ]
    }
  },
  chainWebpack(config) {
    // 它可以提高首屏速度，建议开启预加载
    config.plugin('preload').tap(() => [
      {
        rel: 'preload', // 预加载配置
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], // 文件黑名单，不预加载这些文件
        include: 'initial' // 只包含初始页面
      }
    ])

    // 当有很多页面时，会导致太多无意义的请求
    config.plugins.delete('prefetch') // 删除预取插件

    // 设置svg-sprite-loader, 打包所有svg到一个svg标签上，将svg名称作为symbol标签的id属性
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons')) // 排除src/icons目录
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/) // 匹配svg文件
      .include.add(resolve('src/icons')) // 包含src/icons目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader') // 使用svg-sprite-loader处理
      .options({
        symbolId: 'icon-[name]' // 设置symbol的id格式
      })
      .end()

    config
      .when(process.env.NODE_ENV !== 'development', // 当不是开发环境时
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` 必须与 runtimeChunk 名称相同。默认是 `runtime`
              inline: /runtime\..*\.js$/ // 内联运行时js文件
            }])
            .end()
          config
            .optimization.splitChunks({ // 代码分割配置
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs', // 第三方库打包名称
                  test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的模块
                  priority: 10, // 优先级
                  chunks: 'initial' // 只打包初始依赖的第三方库
                },
                elementUI: {
                  name: 'chunk-elementUI', // 将elementUI拆分为单独的包
                  priority: 20, // 权重需要比libs和app大，否则会被打包到libs或app中
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为了适配cnpm
                },
                commons: {
                  name: 'chunk-commons', // 公共组件打包名称
                  test: resolve('src/components'), // 可以自定义规则
                  minChunks: 3, // 最小公共数量
                  priority: 5, // 优先级
                  reuseExistingChunk: true // 复用已存在的chunk
                }
              }
            })
          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
          config.optimization.runtimeChunk('single') // 运行时代码单独打包
        }
      )
  }
}
